import { Form, Input, Modal } from 'antd';
import type { DragItemType } from '@/types/template';

interface ClarificationModalProps {
  item: DragItemType;
  value: string;
  open: boolean;
  onCancel: () => void;
  onSubmit: (reason: string) => void;
}
const ClarificationModal = (props: ClarificationModalProps) => {
  const { item, value, open, onCancel, onSubmit } = props;
  const [form] = Form.useForm();
  const handleOnOk = async () => {
    const values = await form.validateFields();
    console.log(values);
    onSubmit(values.reason);
  };
  return (
    <Modal
      width={600}
      title="Clarification"
      open={open}
      onCancel={onCancel}
      onOk={handleOnOk}
      okText="Submit"
      cancelText="Cancel"
    >
      <div style={{ marginTop: '20px' }}>
        <Form form={form} layout="vertical">
          <Form.Item label="Clarification Title:">
            <span>{`${item.title}(${item.enTitle})`}</span>
          </Form.Item>
          <Form.Item label="Clarification content:">
            <span>{`${item.value}  ->  ${value}`}</span>
          </Form.Item>
          <Form.Item
            name="reason"
            label="Clarification reason:"
            rules={[{ required: true, message: '请输入澄清原因' }]}
          >
            <Input.TextArea rows={4} />
          </Form.Item>
        </Form>
      </div>
    </Modal>
  );
};

export default ClarificationModal;
